<template>
    <div>
        <RouterView />
        <div class="fotter">
            <van-tabbar v-model="active" class="navbar">
                <van-tabbar-item v-for="item in icon" class="item" :key="item.title" replace :to="item.path ">
                    <span class="bar">{{ item.title }}</span>
                    <template #icon="props">
                        <img :src="props.active ? item.active : item.inactive" />
                    </template>
                </van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref ,watch} from 'vue';
import { RouterView } from 'vue-router';
import gwcck from '@/assets/gwcck.png'
import syck from '@/assets/syck.png'
import gwc from '@/assets/gwc.png'
import sy from '@/assets/sy.png'
import wdck from '@/assets/wdck.png'
import wd from '@/assets/wd.png'
import scck from '@/assets/scck.png'
import sc from '@/assets/sc.png'
import xxck from '@/assets/xxck.png'
import xx from '@/assets/xx.png'
const active = ref(Number(sessionStorage.getItem('active')) || 0)
console.log(active.value);

const icon = [
    {
        title: '首页',
        active: syck,
        inactive: sy,
        path:'/nav/home'
    },
    {
        title: '商场',
        active: scck,
        inactive: sc,
        path:'/nav/shop'
    },
    {
        title: '消息',
        active: xxck,
        inactive: xx,
        path:'/nav/messagelist'
    },
    {
        title: '购物车',
        active: gwcck,
        inactive: gwc,
        path:'/nav/cart'
    },
    {
        title: '我的',
        active: wdck,
        inactive: wd,
        path:'/nav/mine'
    }
]
watch(active,(newValue:any,oldValue)=>{
    sessionStorage.setItem('active',newValue)
    console.log(newValue,oldValue);
})
</script>
<style lang='less' scoped>
.fotter {
    position: fixed;
    bottom: 0;
    background-color: pink;
    width: 375px;
}

.bar {
    left: 31px;
    top: 815px;
    width: 28px;
    height: 19px;
    line-height: 19px;
    color: rgb(16, 16, 16);
    font-size: 12px;
    text-align: left;
    font-family: PingFangSC-regular;
}

.item {
    left: 25px;
    top: 70px;
    width: 40px;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
        width: 35px;
        height: 35px;
    }
}

.navbar {
    height: 60px;
}
</style>